<template>
	<view class="content">

	</view>
</template>

<script>
	var pusher = null;
	var than;
	export default {
		props: {
			tips: {
				type: Object,
				default: function() {
					return {
						text: '提示文字，直播点文字'
					};
				}
			}
		},
		name: 'yyq-LivePusher',
		data() {
			return {
				livepushurl: '',
				currentWebview: null,
				itemTitle: '12321111',
				begin: false,
				beauty: false, //0关，1开
				whiteningNumber: 0 //美白等级
			};
		},
		onLoad(o) {
			than = this;
			than.livepushurl = o.push_address;
		},
		created() {
			this.getwebview(); //获取webview
		},
		methods: {
			getwebview() {
				var pages = getCurrentPages();
				var page = pages[pages.length - 1];
				// #ifdef APP-PLUS
				var getcurrentWebview = page.$getAppWebview();
				var ch = getcurrentWebview.children();
				console.log(JSON.stringify(ch));
				this.plusReady(getcurrentWebview); //创建LivePusher对象

				// #endif
			},

			/**
			 * 创建LivePusher对象 即推流对象
			 */

			plusReady(currentWebview) {
				var temp = this;
				// 创建直播推流控件
				pusher = new plus.video.LivePusher('pusher', {
					url: '',
					mode:'SD',
					top: '0px',
					left: '0px',
					width: '100%',
					height: '100%',
					position: 'absolute', //static静态布局模式，如果页面存在滚动条则随窗口内容滚动,absolute绝对布局模式，如果页面存在滚动条不随窗口内容滚动； 默认值为"static"
					beauty: '0', //美颜 0 关  1  开
					whiteness: '0', //0、1、2、3、4、5，0不使用美白，值越大美白程度越大。
					aspect: '9:16'
				});
				// 提示文字
				var titleContent = new plus.nativeObj.View(
					'title', {
						top: '5%',
						left: '10%',
						height: '10%',
						width: '80%'
					},
					[{
						id: 'content',
						tag: 'font',
						text: temp.itemTitle,
						textStyles: {
							size: '10px',
							color: '#ffffff'
						},
						position: {
							width: '80%',
							left: '10%'
						}
					}]
				);
				// 创建镜头切换的按钮
				var switchBarVew = new plus.nativeObj.View(
					'switchBarVew', {
						top: '5%',
						left: '80%',
						height: '10%',
						width: '20%'
					},
					[{
							tag: 'img',
							id: 'reversal',
							src: 'static/yyq-livepush/reversal.png',
							position: {
								width: '28%',
								left: '36%',
								height: '30%'
							}
						},
						{
							tag: 'font',
							id: 'font',
							text: '翻转',
							textStyles: {
								size: '10px',
								color: '#ffffff'
							},
							position: {
								width: '80%',
								left: '10%'
							}
						}
					]
				);
				// 美颜按钮
				var beautyBarVew = new plus.nativeObj.View(
					'beautyBarVew', {
						top: '15%',
						left: '80%',
						height: '10%',
						width: '20%'
					},
					[{
							tag: 'img',
							id: 'reversal',
							src: 'static/yyq-livepush/beuty-close.png',
							position: {
								width: '28%',
								left: '36%',
								height: '30%'
							}
						},
						{
							tag: 'font',
							id: 'font',
							text: '美颜-关',
							textStyles: {
								size: '10px',
								color: '#ffffff'
							},
							position: {
								width: '80%',
								left: '10%'
							}
						}
					]
				);
				// 美白按钮
				var WhiteningBarVew = new plus.nativeObj.View(
					'WhiteningBarVew', {
						top: '25%',
						left: '80%',
						height: '10%',
						width: '20%'
					},
					[{
							tag: 'img',
							id: 'reversal',
							src: 'static/yyq-livepush/beautiful.png',
							position: {
								width: '28%',
								left: '36%',
								height: '30%'
							}
						},
						{
							tag: 'font',
							id: 'font',
							text: '美白',
							textStyles: {
								size: '10px',
								color: '#ffffff'
							},
							position: {
								width: '80%',
								left: '10%'
							}
						}
					]
				);
				//开始按钮
				var startBtn = new plus.nativeObj.View('startBtn', {
					top: '80%',
					left: '20%',
					height: '50px',
					width: '60%'
				}, [{
						tag: 'rect',
						id: 'startrect',
						position: {
							width: '100%',
							left: '0px',
							height: '100%'
						},
						rectStyles: {
							color: '#FE2B54',
							radius: '20px'
						}
					},
					{
						tag: 'font',
						id: 'startfont',
						text: '开始直播',
						textStyles: {
							size: '20px',
							color: '#ffffff'
						},
						position: {
							width: '100%',
							left: '0px',
							height: '100%'
						}
					}
				]);
				var closeBtn = new plus.nativeObj.View(
					'closeBtn', {
						top: '24px',
						left: '20px',
						height: '24px',
						width: '24px'
					},
					[{
						tag: 'img',
						id: 'reversal',
						src: 'static/yyq-livepush/close-livepushi.png',
						position: {
							width: '100%',
							left: '0px',
							height: '100%'
						}
					}]
				);
				if (!this.begin) {
					closeBtn.hide();
				}
				// ios必须要加这个，不然ios会白屏
				pusher.preview();
				//将创建的对象 追加到webview中
				currentWebview.append(pusher);
				currentWebview.append(titleContent);
				currentWebview.append(startBtn);
				currentWebview.append(beautyBarVew);
				currentWebview.append(WhiteningBarVew);
				currentWebview.append(switchBarVew);
				currentWebview.append(closeBtn);
				switchBarVew.addEventListener(
					'click',
					function(e) {
						temp.switchCamera();
					},
					false
				);
				beautyBarVew.addEventListener(
					'click',
					function(e) {
						temp.beauty = !temp.beauty;
						var textT = '';
						var srcPath = '';
						var colors = '';
						if (temp.beauty) {
							textT = '美颜-开';
							srcPath = 'static/yyq-livepush/beuty-open.png';
							pusher.setStyles({
								beauty: 1
							})
							colors = '#f4ea2a';
						} else {
							textT = '美颜-关';
							srcPath = 'static/yyq-livepush/beuty-close.png';
							pusher.setStyles({
								beauty: 0
							})
							colors = '#ffffff';
						}
						beautyBarVew.draw([{
								tag: 'img',
								id: 'reversal',
								src: srcPath,
								position: {
									width: '28%',
									left: '36%',
									height: '30%'
								}
							},
							{
								tag: 'font',
								id: 'font',
								text: textT,
								textStyles: {
									size: '10px',
									color: colors
								},
								position: {
									width: '80%',
									left: '10%'
								}
							}
						]);
					},
					false
				);
				WhiteningBarVew.addEventListener(
					'click',
					function(e) {
						var textT = '';
						temp.whiteningNumber++;
						pusher.setStyles({
							whiteness: temp.whiteningNumber
						});
						if (temp.whiteningNumber == 0) {
							textT = '无美白';
						} else {
							textT = temp.whiteningNumber + '级美白';
						}
						WhiteningBarVew.draw([{
								tag: 'img',
								id: 'reversal',
								src: 'static/yyq-livepush/beautiful.png',
								position: {
									width: '28%',
									left: '36%',
									height: '30%'
								}
							},
							{
								tag: 'font',
								id: 'font',
								text: textT,
								textStyles: {
									size: '10px',
									color: '#ffffff'
								},
								position: {
									width: '80%',
									left: '10%'
								}
							}
						]);
						if (temp.whiteningNumber == 5) {
							temp.whiteningNumber = -1;
						}
					},
					false
				);
				closeBtn.addEventListener(
					'click',
					function(e) {
						temp.closeLivepush();
						
					},
					false
				);
				startBtn.addEventListener(
					'click',
					function(e) {
						//开始直播录制
						uni.showModal({
							title: '提示',
							content: '是否开始直播录制?',
							cancelText: '否',
							confirmText: '是',
							success(res) {
								if (res.confirm) {
									//开始
									temp.begin = true;
									temp.startPusher();
									startBtn.hide();
									closeBtn.show();
								}
							}
						});
					},
					false
				);
				// 监听状态变化事件
			},
			// 开始推流
			startPusher() {
				console.log(1);
				// 设置推流服务器
				pusher.setOptions({
					url: this.livepushurl //推流地址********************************* 此处设置推流地址
				});
				pusher.start(); //推流开启
			},
			// 切换摄像头
			switchCamera() {
				pusher.switchCamera();
				this.itemTitle = "daasda";
				var view = new plus.nativeObj.View('test', {
					top: '0px',
					left: '0px',
					height: '100%',
					width: '100%'
				});
				// 绘制图片
				view.drawBitmap(bitmap2, {
					top: '0px',
					left: '0px',
					width: '100%',
					height: '100%'
				}, {
					top: 'auto',
					left: 'auto',
					width: '100%',
					height: '100%'
				});

				var text = new plus.nativeObj.View(
					'text', {
						top: '300px',
						left: '100px',
						height: '200px',
						width: '200px'
					},
					[{
						tag: 'img',
						id: 'reversal',
						src: 'static/yyq-livepush/a.gif',
						position: {
							width: '28%',
							left: '36%',
							height: '30%'
						}
					}]
				);
				var pages = getCurrentPages();
				var page = pages[pages.length - 1];
				var getcurrentWebview = page.$getAppWebview();
				getcurrentWebview.append(view);
			},
			// 结束录制
			closeLivepush() {
				uni.showModal({
					title: '提示',
					content: '确定要结束直播录制吗',
					cancelText: '否',
					confirmText: '是',
					success: res => {
						if (res.confirm) {
							pusher.pause(); //结束直播推流
							pusher.close();
							uni.navigateBack();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		onShow() {
			uni.getNetworkType({
				success: function(res) {
					console.log(res.networkType);
					if (res.networkType != 'wifi') {
						uni.showModal({
							//提醒用户更新
							title: '温馨提示',
							content: '当前非Wifi网络，请注意您的流量是否够用',
							success: res => {}
						});
					}
				}
			});
			uni.onNetworkStatusChange(function(res) {
				console.log(res.isConnected);
				console.log(res.networkType);
				if (res.networkType != '4g' && res.networkType != 'wifi') {
					uni.showModal({
						//提醒用户更新
						title: '温馨提示',
						content: '当前网络质量差，请切换为4G网络或Wifi网络',
						success: res => {}
					});
				}
			});
		}
	};
</script>

<style scoped>
	.content {
		background: #000;
		overflow: hidden;
		width: 750upx;
		position: fixed;
	}
</style>
